<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}">
    <div v-loading="infoLoading" class="up-detail-container no-margin mobile-radius">
      <template v-if="!permissionDenied">
        <ProgressStep v-if="!showMobilePage" :mode="2" :step-list="stepList" :order-status="stepActiveId" :is-show-correct="false" :is-expedited="detailInfo.isExpedited"/>
        <explanation :explanation="explanationObj" :countdown="true" style="margin-bottom: 0;" />
        <div class="up-detail-content">
          <!-- 创建信息 -->
          <createInfo :detail-info="detailInfo" />
          <!-- 账号信息
          <accountInfo :detail-info="detailInfo" />
          上刊价格
          <journalInfo :detail-info="detailInfo" />
          更多上刊信息
          <moreInfo :detail-info="detailInfo" /> -->
          <ShowInfo :show-mobile-page="showMobilePage" :account-info="accountInfo" :platform-fields="getFields()" :platform-name="platformName"/>
        </div>
        <el-image v-if="isRevoke" :src="revokeImg" class="revoke-img"/>
        <ExamineAndApprove
          ref="examineAndApproveRef"
          :disabled="infoLoading"
          :process-id="processId"
          :main-id="upOnlineId"
          :version="version"
          :get-comments-api="getUpOnlineComments"
          :comment-add-api="upOnlineCommentAdd"
          :process-revocation-api="upOnlineRevocation"
          :process-recall-api="upOnlineProcessRecall"
          :process-audit-api="upOnlineProcessAudit"
          :create-user="createUser"
          :business-type="BUSINESS_TYPE.UP_ONLINE"
          :process-type="PROCESS_TYPE.UP_ONLINE"
          :audit-schedule-data="auditScheduleData"
          :senders="senders"
          :show-resource-btn="showResourceBtn"
          :default-aduitor-list="[createUser]"
          :approval-module-type="APPROVAL_MODULE_TYPE.UP_ONLINE"
          is-up-online
          redirect-url="/businessPage/upOnline/detail"
          detail-page-router-name="upOnlineDetail"
          edit-page-router-name="upOnlineEdit"
          @toBack="toBack"
          @handleRefreshResource="initData"
          @handleEditResource="editResource"
          @setProcessData="setProcessData"
          @getAuditSchedule="getAuditSchedule"
          @queryProcessData="queryProcessData"
          @handlePressSend="handlePressSend"
          @handleCancelPress="handleCancelPress"
          @handleSendMsg="handleSendMsg"
          @handleSender="handleSender"
          @handleRemodify="handleRemodify"
          @handleResubmit="handleResubmit"
        >
          <template v-if="showResourceBtn && !showMobilePage" slot="upOnline">
            <el-button type="primary" size="small" class="refresh-btn" @click="initData">刷新资源</el-button>
            <el-button v-if="hasRouteAuth('crm:upOline:edit')" type="primary" size="small" class="refresh-btn" @click="editResource">编辑资源</el-button>
          </template>
        </ExamineAndApprove>
      </template>
      <DeniedPlaceholder v-else />
      <ding-ding-dialog
        ref="pressSendDialogRef"
        :btn1="'确认加急'"
        :btn2="'取消'"
        :show-send-checkbox="false"
        :select-with-user-load="false"
        :default-list="pressDefaultList"
        redirect-url="/supplierPage/upOnlineDetail"
        summary-title="加急原因"
        title="催办通知"
        @handelOK="toSend" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import Step from './components/step';
import { hasRouteAuth } from '@/utils/permission';
import explanation from '@/components/Common/explanation';
import SectionTitle from '@/components/Title';
import accountInfo from './model/accountInfo';
import moreInfo from './model/moreInfo';
import journalInfo from './model/journalInfo';
import createInfo from './model/createInfo';
import ExamineAndApprove from '@/components/Common/ExamineAndApprove';
import ProgressStep from '@/components/CreateOrder/orderDetail/step';
import ShowInfo from './components/showInfo.vue';
import { PROGRESS_STEP } from '@/utils/const/upOnline';
// import { redbookFields, bilibiliFields, weiboFields, douyinFields } from './components/data';
import { redbookFields, douyinFields, weiboFields, bilibiliFields, kuaishouFields, weixinFields, weixinVideoFields } from './components/data';
import { BUSINESS_TYPE, PROCESS_TYPE } from '@/utils/const/process';
import { upOnlineDetail, getUpOnlineComments, upOnlineCommentAdd, upOnlineRevocation, upOnlineProcessRecall, upOnlineProcessAudit } from '@/api/upOnline';
import { contractResubmit } from '@/api/legal';
import revokeImg from '@/assets/auditProcess/process_status_3.png';
import { APPROVAL_MODULE_TYPE } from '@/utils/const';
import { showModal } from '@/utils/message';
import schedule from '@/mixins/schedule';
import upMixin from './mixin';

export default {
  components: {
    ProgressStep,
    explanation,
    SectionTitle,
    ExamineAndApprove,
    createInfo,
    accountInfo,
    moreInfo,
    Step,
    journalInfo,
    ShowInfo
  },
  mixins: [schedule, upMixin],
  data() {
    return {
      revokeImg,
      BUSINESS_TYPE,
      PROCESS_TYPE,
      APPROVAL_MODULE_TYPE,
      getUpOnlineComments,
      upOnlineCommentAdd,
      upOnlineRevocation,
      upOnlineProcessRecall,
      upOnlineProcessAudit,
      redbookFields,
      bilibiliFields,
      weiboFields,
      douyinFields,
      processData: {// 流程信息
        list: [],
        operation: {
          auth: [],
          content: null
        }
      },
      permissionDenied: false,
      detailInfo: {
        id: '',
        accountInfo: {
          id: '',
          platformId: '',
          platformCategory: ''
        },
        journalInfo: {},
        moreInfo: {}
      },
      accountInfo: {
        id: 0,
        accountsInfo: {},
        journalInfo: {},
        moreJournalInfo: {}
      },
      platformName: '',
      isRevoke: false,
      infoLoading: false,
      stepActiveId: PROGRESS_STEP.PENDING,
      processStatus: null,
      upOnlineId: '', // 审批单号id
      processId: '' // 审批进程id
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.app.showMobilePage,
      'showMobilePage': state => state.app.showMobilePage
    }),
    stepList() {
      return [
        { name: '选择账号', id: PROGRESS_STEP.PENDING },
        { name: '确认信息', id: PROGRESS_STEP.CONFIRM },
        { name: '上刊审批', id: PROGRESS_STEP.UNDER_REVIEW },
        { name: '流程结束', id: PROGRESS_STEP.FINISHED }
      ];
    },
    showResourceBtn() {
      return [1, 2, 5].includes(this.processStatus);
    },
    createUser() {
      return { id: this.detailInfo.proposerId, userName: this.detailInfo.proposer };
    }
  },
  created() {
    this.initData();
  },
  methods: {
    hasRouteAuth,
    getFields() {
      return {
        '小红书': redbookFields,
        'B站': bilibiliFields,
        '抖音': douyinFields,
        '微博': weiboFields,
        '快手': kuaishouFields,
        '微信': weixinFields,
        '微信视频号': weixinVideoFields
      }[this.platformName];
    },
    initData() {
      this.initRouteData();
      this.queryProcessData(); // 流程数据
    },
    setProcessData(processData) {
      this.processData = processData;
      this.processStatus = processData.processStatus;
    },
    initRouteData() {
      this.upOnlineId = this.$route.query.id;
      this.processId = this.$route.query.processId;
      if (!this.upOnlineId || !this.processId) {
        this.$message.warning('无法获取ID');
        const timer = setTimeout(() => {
          this.$router.back();
          clearTimeout(timer);
        }, 1500);
      }
    },
    toBack() {
      if (this.$route.query.fromTodo) {
        this.$router.go(-1);
      } else {
        this.$router.push({ name: 'upOnline' });
      }
    },
    editResource() {
      if (this.hasRouteAuth('medium:resource:admin')) {
        const routeUrl = this.$router.resolve({
          name: 'detailResource',
          params: { resourceId: this.detailInfo.id }
        });
        window.open(routeUrl.href, '_blank');
      } else {
        this.$message.warning('您暂无账号资源可读权限，请联系管理员添加');
      }
    },
    getDetailData() {
      this.infoLoading = true;
      upOnlineDetail(this.upOnlineId).then(res => {
        this.infoLoading = false;
        if (res.code === 200) {
          this.handleProcessCheck(res.data.processId);
          this.detailInfo = res.data;
          this.accountInfo.id = res.data.id;
          this.accountInfo.accountsInfo = res.data.accountInfo;
          this.accountInfo.journalInfo = res.data.journalInfo;
          this.accountInfo.moreJournalInfo = res.data.moreInfo;
          this.platformName = this.detailInfo.accountInfo.platform;
          if (res.data.processStatus === 3) { // 3为撤销
            this.stepActiveId = PROGRESS_STEP.PENDING;
            this.isRevoke = true;
          } else {
            this.isRevoke = false;
            this.stepActiveId = res.data.processStatus;
          }
        }
      }).catch(err => {
        if (err.code === 403) {
          this.permissionDenied = true;
        }
        this.infoLoading = false;
      });
    },
    queryProcessData() {
      this.getDetailData();
      this.getAuditSchedule();
      this.$nextTick(() => {
        this.$refs.examineAndApproveRef && this.$refs.examineAndApproveRef.getProcessList();
      });
    },
    getAuditSchedule() {
      this.requestAuditSchedule(this.processId);
    },
    handleRemodify() {
      this.$router.push({
        name: 'upOnlineEdit',
        query: { resourceId: this.detailInfo.id, platformName: this.detailInfo.accountInfo.platform, remodifyId: this.upOnlineId }
      });
    },
    handleResubmit() {
      // 先判断必填字段是否必填
      this.handleValidate();
      showModal('当前审批未过审，请确认无误后进行重新提交，提交后将重新开始审批，如有内容调整请修改后再提交').then(() => {
        contractResubmit({ id: this.processId }).then(_ => {
          this.$message.success('提交成功');
          this.queryProcessData();
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.up-detail-container {
  margin: 16px 16px 0 16px;
  background-color: #fff;
  padding-bottom: 55px;
  position: relative;
  min-height: calc(100vh - 56px);
  .up-detail-content {
    padding: 0 24px 0 16px;
  }
  .refresh-btn {
    padding: 7px 12px;
  }
  .revoke-img{
    position: absolute;
    width: 80px;
    height: 80px;
    right: 56px;
    top: 33px;
    z-index: 999;
  }
  &::v-deep {
    .dividing{
      .el-col {
        .el-form-item__label {
          color: #999;
        }
        .el-form-item__content {
          color: #333;
          border-right: 1px solid #EBEEFD;
        }
        @media only screen and (min-width: 1300px) {
          &:nth-child(3n) {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
        @media screen and (max-width: 1300px) {
          &:nth-child(2n) {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
  }
}
</style>

